<template>
	<view class="loadig_wrap">
		<view class="overlay"></view>
		<view class="content">
		<!-- 	<img src="" /> -->
		  <uv-loading-icon duration="800" class="icon" color="white" mode="semicircle"></uv-loading-icon>
		  <text>正在加载</text>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		onMounted,
		ref
	} from 'vue'
	export default defineComponent({
		name: 'Loading'
	})
</script>
<script setup>

</script>

<style lang="scss" scoped>
.loadig_wrap{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	
	.overlay{
		width: 100vw;
		height: 100vh;
		position: fixed;
		background-color: rgba(0,0,0,0.4);
		z-index: 5563;
		
	}
	.content{
		width: 100px;
		height: 92px;
		border-radius:4px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-100%);
		background-color: rgba(0,0,0,0.6);
		z-index: 5563;
		display: flex;
		flex-direction: column;
		padding: 18px;
		box-sizing: border-box;
		
		.icon{
			margin-bottom: 12px;
		}
		
		text{
			// position: absolute;
			text-align: center;
			color: white;
		}
	}
}
</style>